<!DOCTYPE html>
<#assign base=request.contextPath />
<html>
<head>
  <base href="${base}">
  <meta charset="utf-8">
  <title>在线考试系统</title>
  <meta name="renderer" content="webkit">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
  <link rel="stylesheet" href="${base}/layuiadmin/layui/css/layui.css" media="all">
  <link rel="stylesheet" href="${base}/css/global.css" media="all">
  <link rel="stylesheet" href="${base}/css/style.css" media="all">
  <link rel="stylesheet" href="${base}/codemirror/lib/codemirror.css">
  <style>
  .layui-card-header {
  	height: auto;
  	line-height: 26px;
  }
  </style>
</head>

<body>
<div class="alone-banner">
  <div class="layui-main">
    <h1 style="padding-top:20px">在线考试系统</h1>
    <p class="">距离考试结束还剩下：<span id="time"></span></p>
  </div>
</div>

<div class="layui-main alone-items" style="margin-top:20px;">
	<form action="${base}/exam/student/saveExam" method="post">
	<div class="layui-row layui-col-space20">
		<div class="layui-col-md12">
			<img style="height:400px" src="${base}/file/${data.idx}.jpg">
		</div>
		
		<div class="layui-col-md12">
			<div class="layui-card">
				<div class="layui-card-header"><strong>第1题： </strong>${data.t1.content}</div>
				<div class="layui-card-body">
					<textarea id="code1" name="answer1">${data.answer1!}</textarea>
				</div>
			</div>
		</div>

		<div class="layui-col-md12">
			<img style="height:400px" src="${base}/file/HQL.jpg">
		</div>
		<div class="layui-col-md12">
			<div class="layui-card">
				<div class="layui-card-header">
					<strong>第2题： </strong>已知上图实体类，请使用HQL完成下面问题：（30分）
					<#list data.t2 as d>
						${d.content}
					</#list>
				</div>
				<div class="layui-card-body">
					<textarea id="code2" name="answer2">${data.answer2!}</textarea>
				</div>
			</div>
		</div>
		
		<div class="layui-col-md12">
			<div class="layui-card">
				<div class="layui-card-header">
					<#--
					<strong>第3题： </strong>使用Spring AOP实现一个日志切面，拦截com.xju.service包下所有public方法，<br>
					输出：什么时间调用了某方法，参数是什么，结果是什么，执行多长时间。（30分）
					-->
					<strong>第3题： </strong>使用Spring AOP实现一个日志切面，模仿事务开始、提交、回滚操作。（30分）<br>					
				</div>
				<div class="layui-card-body">
					<textarea id="code3" name="answer3">${data.answer3!}</textarea>
				</div>
			</div>
		</div>
		
		<div class="layui-form-item layui-layout-admin">
            <div class="layui-input-block">
              <div class="layui-footer" style="left:0;padding:10px;text-align:center;z-index: 999;">
                <button id="submitBtn" class="layui-btn" type="button">我要交卷，立即提交</button>
              </div>
            </div>
          </div>
	</div>
	</form>
</div>

<script src="${base}/layuiadmin/layui/layui.js"></script>
<script src="${base}/codemirror/lib/codemirror.js"></script>
<script src="${base}/codemirror/mode/clike/clike.js"></script>
<script src="${base}/codemirror/addon/selection/active-line.js"></script>

<script>
layui.use(['util', 'layer'], function(){
    var $ = layui.$;
    var util = layui.util;
    var layer = layui.layer;
    
    //倒计时
    var thisTimer;
    setCountdown = function(y, M, d, H, m, s){
      	var endTime = new Date(y, M||0, d||1, H||0, m||0, s||0), //结束日期
      	serverTime = new Date(); //假设为当前服务器时间，这里采用的是本地时间，实际使用一般是取服务端的
       
     	clearTimeout(thisTimer);
      	util.countdown(endTime, serverTime, function(date, serverTime, timer){
        	// var str = date[0] + '天' + date[1] + '时' +  date[2] + '分' + date[3] + '秒';
        	var str = date[0] + '天' + date[1] + '时' +  date[2] + '分';
        	$('#time').html(str);
        	thisTimer = timer;
      	});
    };
    setCountdown(2020,3, 25, 12);
    
    $('textarea').each(function(elm) {
    	var editor = CodeMirror.fromTextArea(this, {
	   	  	mode: "text/x-java",
	   	  	styleActiveLine: true,
	   	  	lineNumbers: true,
	   	  	//readOnly: 'nocursor', //只读
	   	  	lineWrapping: true
    	});
    	
    	setTimeout(() => {
			editor.refresh();
    	}, 10);
    });  
    
    $('#submitBtn').click(function() {
    	if(layer.confirm('确定提交答卷吗？', {icon: 3, title:'提示'}, function(idx) {
    		$('form').submit();
    		
    		layer.close(idx);
    	}));
    });
});
</script>

</body>
</html>


